﻿<Page x:Name="Root"
      x:Class="QKitSampleApp.InputAwarePanelSample.ChatPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:QKitSampleApp.InputAwarePanelSample"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:q="using:QKit"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <DataTemplate x:Key="SentTemplate">
            <Grid Margin="19,9.5,19,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="4*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border Grid.Column="1"
                        Background="{ThemeResource PhoneAccentBrush}">
                    <TextBlock Text="{Binding Content}"
                               Style="{ThemeResource BodyTextBlockStyle}"
                               Margin="9.5" />
                </Border>
                <Polygon Grid.Column="1"
                         Grid.Row="1"
                         Fill="{ThemeResource PhoneAccentBrush}"
                         Stretch="Uniform"
                         Points="0,0,3,2,3,0"
                         Width="15"
                         HorizontalAlignment="Right"
                         Margin="9.5,-.5" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ReceivedTemplate">
            <Grid Margin="19,0,19,9.5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border Grid.Row="1"
                        Background="{ThemeResource PhoneAccentBrush}"
                        Opacity="0.6" />
                <Border Grid.Row="1">
                    <TextBlock Text="{Binding Content}"
                               Style="{ThemeResource BodyTextBlockStyle}"
                               Margin="9.5" />
                </Border>
                <Polygon Fill="{ThemeResource PhoneAccentBrush}"
                         Stretch="Uniform"
                         Points="0,0,3,2,0,2"
                         Width="15"
                         HorizontalAlignment="Left"
                         Margin="9.5,-.5"
                         Opacity="0.6" />
            </Grid>
        </DataTemplate>
        <local:ChatItemTemplateSelector x:Key="Selector"
                                        ReceivedMessageTemplate="{StaticResource ReceivedTemplate}"
                                        SentMessageTemplate="{StaticResource SentTemplate}" />
    </Page.Resources>
    <Page.DataContext>
        <local:ChatViewModel />
    </Page.DataContext>
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Send"
                          Click="AppBarButton_Click"
                          IsTabStop="False" />
        </CommandBar>
    </Page.BottomAppBar>
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- TitlePanel -->
        <StackPanel Margin="19,12,0,25">
            <TextBlock Text="JOHN DOE"
                       Style="{ThemeResource TitleTextBlockStyle}"
                       Typography.Capitals="SmallCaps" />
        </StackPanel>

        <!--TODO: Content should be placed within the following grid-->
        <q:InputAwarePanel Grid.Row="1"
                           x:Name="IAP"
                           AnimationMode="Independent"
                           VerticalAlignment="Bottom"
                           LayoutChangeStarted="InputAwarePanel_LayoutChangeCompleted">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <ListView x:Name="ThreadList"
                          ItemsSource="{Binding ThreadContent}"
                          ItemTemplateSelector="{StaticResource Selector}">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment"
                                    Value="Stretch" />
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
                <Grid Grid.Row="1"
                      Margin="19,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="4*" />
                    </Grid.ColumnDefinitions>
                    <TextBox x:Name="MessageInput"
                             Grid.Column="1"
                             PlaceholderText="type to a text message"
                             Text="{Binding DataContext.Message, ElementName=Root, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </Grid>
            </Grid>
        </q:InputAwarePanel>
    </Grid>
</Page>
